<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!--    <script src="css/base.css"></script>-->
    <script src="resource/vue.js"></script>
    <link rel="stylesheet" href="ElementUI/theme-chalk/index.css"/>
    <script src="ElementUI/index.js" charset="utf-8"></script>
    <script src="resource/axios.min.js"></script>
    <style>
        .box-card{
            width: 400px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card class="box-card">

            <h3>名侦探柯南档案馆</h3>
            <el-form :model="loginForm" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <!--角色-->
                <el-form-item label="角色">
                    <el-select v-model="loginForm.role" placeholder="请选择">
                        <el-option label="管理员" value="1"></el-option>
                        <el-option label="普通用户" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="register">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                loginForm:{
                    username: '',
                    password: '',
                    role: ''
                }
            },
            methods: {
                login() {
                    console.log("发请求");
                    // console.log(this.loginForm)
                    axios.post('/login', {
                        userName: this.loginForm.username,
                        userPassword: this.loginForm.password,
                        role: this.loginForm.role
                    }).then((response) => {

                        if (response.data.code == 200) {

                            localStorage.setItem('showLoginSuccess', 'true');
                            // console.log(response.data.data);
                            localStorage.setItem('user', response.data.data.userName);
                            localStorage.setItem('role',response.data.data.role)
                            this.loginForm.username = "";
                            this.loginForm.password = "";
                            this.loginForm.role = "";
                            if(response.data.data.role = 1){
                                window.location.href = "/html/admin/admin.html";
                            }else{
                                window.location.href = "/html/receptiondesk/index.html";
                            }

                        } else {
                            this.$message.error(response.data.msg);
                        }
                    }).catch( (error) => {
                        console.log(error);
                    });
                },
                register() {
                    window.location.href = "/register.html";
                }
            },
            mounted(){
                if (localStorage.getItem("registerSuccess") == "true"){
                    this.$message.success("注册成功请登录");
                    localStorage.removeItem("registerSuccess");
                }
            }
        });
    </script>
</body>
</html>